<template>
    <div id="usermanage">
        <div class="topi">
             <el-date-picker
                v-model="searchdate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-input placeholder="请输入手机号" v-model="searchinput">
                <el-button slot="append" @click="getTableData(1)" icon="el-icon-search"></el-button>
            </el-input>
        </div>
         <el-table :data="tableData" border  style="width: 100%">
            <el-table-column v-for="col in tableCols" :key="col.id"  :prop="col.prop"
            :label="col.label">
            </el-table-column>
            <el-table-column prop='freezeState' :formatter='changeState' label='冻结状态'></el-table-column>
            <el-table-column  label="操作"  align="center" width="172">
                <template slot-scope="scope">
                  <el-button type="text" size="normally"  @click="editAdmin(scope.row)">{{scope.row.freezeState == 1 ? '冻结' : '恢复'}}</el-button>
                  <el-button type="text" size="normally"  @click="view(scope.row)">查看</el-button>
                </template>
              </el-table-column>
        </el-table>
        <el-pagination class="pageinfo" background layout="total, prev, pager, next" :page-size='limit'
          :current-page='currentPage'
          @current-change='changeCurrentPage'
          :total="totals">
        </el-pagination>
    </div>
 
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        tableCols: [
            {id: 1, prop: 'id', label: 'id'}, {id: 2, prop: 'phone', label: '手机'}, {id: 3, prop: 'fullname', label: '姓名/法号'},
            {id: 4, prop: 'state', label: '状态'}, {id: 5, prop: 'registerTime', label: '注册时间'},  {id: 6, prop: 'lastlogin', label: '最后登录'}
        ],
        searchinput: '',
        searchdate: [],
        currentPage: 1,
        totals: 0,
        isdisabled: false,
        limit: 10
      }
    },
    mounted() {
      this.getTableData()
    },
    methods: {
        getTableData(arg) {
          let param = {
            phone: this.searchinput,
            beginTime: this.searchdate[0],
            endTime: this.searchdate[1],
            page: arg || this.currentPage,
            limit: this.limit
          }
          this.$api.apiGetWechatUser(param, res => {
              this.tableData = res.data
              this.totals = res.pageInfo.total
              this.tableData.forEach(item => {
                item.fullname = item.name + ' / ' + item.nameType
                let text = ''
                switch(item.state) {
                  case 1: text = '未认证';break;
                  case 2: text = '已认证';break;
                  default: break;
                }
                item.state = text
              })
          })
        },
        changeState(val) {
          let text = ''
          switch(val.freezeState) {
            case 1: text = '正常';break;
            case 2: text = '已冻结';break;
            default: break;
          }
          return text
        },
        searchTable() {
          this.getTableData()
        },
        changeCurrentPage(page) {
          this.currentPage = page
          this.getTableData()
        },
        editAdmin(row) {
          // 修改状态
          this.isdisabled = true
          let param = {
            id: row.id,
            type: row.freezeState == 1 ? 2 : 1
          }
          this.$api.apiEditUserState(param, res => {
              this.$message({
                type: 'success',
                message: row.freezeState == 1 ? '冻结成功' : '恢复成功'
              })
              
              this.getTableData()
              this.isdisabled = false
          })
        },
        view(row) {
            this.$router.push({path: 'viewUserInfo', query: {id: row.id}})
        }
    }
  }
</script>
<style lang="scss">
#usermanage {
  .topi {
        display: flex;
        width: 80%;
        margin-bottom: 20px;
        .el-input {
            width: 40%;
            margin-left: 30px;
            margin-right: 100px
        }
    }
}
    
</style>
